<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="plugins/jquery-ui.css" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .drag-wrapper {
            width: 400px;
            margin: 50px auto 0;
        }

        .drag-bar {
            height: 40px;
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
            background-color: #E6E6E6;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            cursor: move;
        }

        .resize-item {
            height: 212px;
            border: 1px solid #e6e6e6;
        }

        .sort-wrapper {
            height: 100%;
            overflow: hidden;
        }

        .sort-item {
            list-style: none;
            padding-top: 10px;
        }

        .sort-item li {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
        }

        .sort-item li:hover {
            background-color: #e6e6e6;
        }
    </style>
    <script src="js/jquery-1.12.2.js"></script>
    <script src="plugins/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".drag-wrapper").draggable({
                handle: ".drag-bar" // 指定拖动元素的拖动手柄
            }).find(".resize-item").resizable({
                handles: 's' // 改变大小拖拽方向 ，s：sourth 南
            }).find(".sort-item").sortable({
                opacity: .1 // 指定辅助元素的不透明度0.01~1
            });
            /*$(".drag-wrapper")
             .draggable() // 拖拽
             .find(".resize-item")
             .resizable() // 改变大小
             .find(".sort-item")
             .sortable(); // 排序*/
        });
    </script>
</head>
<body>
<div class="drag-wrapper">
    <div class="drag-bar">可拖动、排序、变形的新闻模块</div>
    <div class="resize-item">
        <div class="sort-wrapper">
            <ul class="sort-item">
                <li>这是第1条新闻!</li>
                <li>这是第2条新闻!</li>
                <li>这是第3条新闻!</li>
                <li>这是第4条新闻!</li>
                <li>这是第5条新闻!</li>
                <li>这是第6条新闻!</li>
                <li>这是第7条新闻!</li>
                <li>这是第8条新闻!</li>
                <li>这是第9条新闻!</li>
                <li>这是第10条新闻!</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
